<template>
    <div>
        <van-nav-bar title="注册"
      :border=false
      right-text="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight" />
      <div class="reg">
        <h1 >
            欢迎注册
        </h1>
          <form action="">
        <van-cell-group>
          <van-field
            v-model="userinfo.username"
            label="用户名"
            placeholder="请输入用户名"
            :error-message="user_err"
            left-icon="contact"
          />
          <van-field
            v-model="userinfo.password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            :error-message="pwd_err"
            left-icon="closed-eye"
            autocomplete=‘new-password’
          />
        </van-cell-group>
        </form>
        <van-button color="red" size="large" @touchstart="reg">注册</van-button>
      </div>

    </div>
</template>
<script>
// 引入提示组件
import { Toast } from 'vant';
export default {
    data() {
    return{
      userinfo: {
        username: '',
        password: '',
      },
      user_err:'',
      pwd_err:''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/my')
    },
    onClickRight() {
      this.$router.push('/login')
    },
    reg() {
        let username=this.userinfo.username;
        let pwd=this.userinfo.password;
      if(username.length<3 || username.length>10 ){
          this.user_err="用户名要求3-10个字符";
          return false;
      }
      if(pwd.length<6){
          this.pwd_err="密码长度必须大于6位"
      }
      this.user_err=this.pwd_err='';
      this.axios.post('http://www.shop.com:8080/api.php/common/getUserAdd?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&username='+username+'&&password='+pwd).then(res=>{
        if(res.data.status==1){
            Toast({
                message: '注册成功，请登录',
                icon: 'success'
            });
          this.$router.push('/login')
        }else{
            Toast({
                message: res.data.msg,
                icon: 'fail'
            });
          }
      })
    }
  }




}
</script>
<style  scoped>

.van-nav-bar .van-icon,
.van-nav-bar__title,
.van-nav-bar__text {
  color: #000;
}
.reg {
  width: 300px;
  margin: 50px auto;
} 
.reg h1{
    font-family: '华文新魏';
    color:brown;
}
</style>